<template>
    <view class="order-list">
        <view v-for="order in collectionList" :key="order.userPayRecordId" class="order-card" >
            <view class="order-header" @click="goToDetails(order.userPayRecordId)">
                <text class="order-time">{{ order.createTime }}</text>
                <text class="order-status">{{ order.payTypeName }}</text>
            </view>

            <view class="order-customer" v-if="order.userName" @click="goToDetails(order.userPayRecordId)">
                客户姓名：{{ order.userName }}
            </view>
            <view v-for="(product,index) in order.productList" :key="index"  @click="gotoProuductDetail(product.productId)">
               <view v-for="(sku,k) in product.skuList" :key="k" class="product-item">
                 <view class="product-left">
                     <image class="product-image" :src="(sku.image ? sku.image.split(',')[0] : '')" mode="aspectFill" />
                     <view class="product-info">
                         <!-- <view class="product-name">{{ product.name }}</view> -->
                         <view class="order-total">款号：{{ sku.productSkuCode }}</view>
                         <view class="order-total">规格：{{ sku.spec }}</view>
                         <view class="product-price">¥{{ sku.price }}</view>
                     </view>
                 </view>
                 <view class="product-right">
                     <view class="product-quantity">共{{ sku.quantity }}件</view>
                 </view>
               </view>
            </view>

            <view class="order-footer" @click="goToDetails(order.userPayRecordId)">
                <view>
                    <view class="name" v-if="order.shopStaffName">店员：{{ order.shopStaffName }}</view>
                </view>
                <view class="order-total">
                    <view>共{{ order.totalQuantity }}件商品，实付金额：</view>
                    <view class="total-amount">¥{{ order.price}}</view>
                </view>
            </view>
            <view class="order-actions">
                <view class="delete-btn" @click="deleteOrder(order)">删除订单</view>
            </view>

        </view>
        <view class="bottom-button">
            <button class="scan-btn" @click="handleScan"> <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
                <text>扫码收银</text></button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { shopApi } from "@/api";
let currentPage = ref(1)
let pageSize = ref(15)
let totalCount = ref(0)
let loadStatus = ref('正在加载中')
const collectionList = ref([]);
const loading = ref(false);
function getShopStaffList(type) {
  let params = {
    "currentPage": currentPage.value,
    "pageSize": pageSize.value
  }
  shopApi.SCANPAYGETSALESRECORDLIST(params).then((res) => {
    if (res.code == 200) {
      if (type == 1) {
        collectionList.value = res.result.data
        totalCount.value = res.result.totalCount
      } else {
        collectionList.value = collectionList.value.concat(res.result.data)
      }
    }else{
        uni.showToast({
            title: res.errMsg,
            icon: "success",
        });
    }
  });
}
// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  if (collectionList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getShopStaffList(2)
});

// 下拉刷新
onPullDownRefresh(() => {
  uni.showToast({
    title: "下拉刷新",
    icon: "none",
    duration: 1000
  });
  loadStatus.value = "正在加载中";
  currentPage.value = 1
  totalCount.value = 0
  isloading.value = false
  collectionList.value = [];
  getShopStaffList(1)
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 2000);
});
onShow(() => {
  getShopStaffList(1)
});
const deleteOrder = (item) => {
    uni.showModal({
        title: '提示',
        content: '确定要删除该订单吗？',
        success: (res) => {
            if (res.confirm) {
                shopApi.SCANPAYDELETESALES({id:item.userPayRecordId}).then((res) => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '订单已删除',
                            icon: 'success'
                        })
                        currentPage.value = 1
                        getShopStaffList(1)
                        // collectionList.value = collectionList.value.filter(order => order.id !== item.userPayRecordId)
                    }else{
                        uni.showToast({
                            title: res.errMsg,
                            icon: "success",
                        });
                    }
                });
            }
        }
    })
}
const goToDetails= (item) => {
    console.log(item,'item')
    uni.navigateTo({
        url: `/pagesshop/sales/details?id=${item}`
    });
};

const gotoProuductDetail = (productId) => {
    uni.navigateTo({
        url: `/pages/good/details?id=${productId}`
    });
}
const handleScan = () => {
    uni.scanCode({
        success: (res) => {
            getFrontProductBySkuCode(res.result);
        }
    })
}
const getFrontProductBySkuCode = (code) => {
    loading.value = true;
	shopApi.SCANPAYGETFRONTPRODUCTBYSKUCODE({productSkuCode: code}).then((res) => {
        loading.value = false;
		if (res.code == 200) {
            console.log(res);
            uni.navigateTo({
                url: "/pagesshop/scancodecashier/index?code=" + code
            });
		}else{
      uni.showToast({
          title: res.errMsg,
          icon: "success",
      });
    }

	})

};
</script>
<style lang="scss">
page {
    background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>

.order-card {
    margin: 20rpx 0px;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
}

.order-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #eee;
}

.order-time {
    color: #666;
    font-size: 28rpx;
}

.order-status {
    color: rgba(214, 142, 68, 1);
    font-size: 24rpx;
}

.order-customer {
    padding: 20rpx 0;
    color: rgba(44, 44, 44, 1);
    font-size: 24rpx;
}

.product-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
}

.product-left {
    display: flex;
    align-items: center;
}

.product-image {
    width: 120rpx;
    height: 120rpx;
    margin-right: 20rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
}

.product-name {
font-size: 14px;
font-weight: 600;
line-height: 22px;
color: rgba(0, 0, 0, 0.9);

}

.product-right {
    display: flex;
    align-items: center;

}

.product-price {
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: rgba(0,0,0,0.9);

}

.product-quantity {
    color: rgba(0, 0, 0, 0.6);
    font-size: 28rpx;
    margin-top: 10rpx;
}

.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20rpx;
    margin-bottom: 30px;
    .name{
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        text-align: left;
        color: rgba(0, 0, 0, 0.6);

    }
}
.order-actions{
    display: flex;
    flex-direction: row-reverse;
}

.order-total {
    color: #666;
    font-size: 28rpx;
    display: flex;
}

.total-amount {
    color: rgba(214, 142, 68, 1);
    font-weight: bold;

}

.delete-btn {
    background: #fff;
    font-size: 28rpx;
    padding: 6rpx 16rpx;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.26);
    border-radius: 12rpx;
    color: rgba(0, 0, 0, 0.4);
}

.bottom-button {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.scan-btn {
    background-color: rgba(214, 142, 68, 1);
    color: #fff;
    border: none;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
}
</style>
